<template>
  <section>
    <div class="row-start-center py-[15px] text-[14px] border-bottom text-[#444] px-[15px]" @click="expand = !expand">
      <div class="w-[25%] break-all box-border px-[4px]">
        {{ item.Username || '--' }}
      </div>
      <div class="w-[35%] text-center break-all box-border px-[4px]">
        <div class="truncate">
          {{ item.LotteryName || "--" }}
        </div>
        <div class="text-[#888] truncate">
          {{ item.Cat2 }}-{{ item.Cat3 }}
        </div>
      </div>
      <div class="w-[30%] text-center break-all box-border px-[4px]">{{ item.BetAmount }}</div>
      <div class="w-[25%] text-center box-border px-[4px]">
        {{ item.WinAmount }}
      </div>
    </div>
    <!-- <div class="bg-[#f8f8f8] px-[15px]" v-if="expand">
      <ul class="text-[#888]">
        <li class="flex justify-between items-center py-[10px]">
          <div>用户名</div>
          <div>{{ item.Username || '--' }}</div>
        </li>
        <li class="flex justify-between items-center py-[10px]">
          <div>昵称</div>
          <div>{{ item.NickName || "--" }}</div>
        </li>
        <li class="flex justify-between items-center py-[10px]">
          <div>备注</div>
          <div>{{ item.Note }}</div>
        </li>
        <li class="flex justify-between items-center py-[10px]">
          <div>领取金额</div>
          <div>{{ item.Amount}}</div>
        </li>
        <li class="flex justify-between items-center py-[10px]">
          <div>领取时间</div>
          <div>{{formatDate(item.CreatedAt)}}</div>
        </li>
      </ul>
    </div> -->
  </section>
</template>
<script setup lang="ts">
import { formatDate } from "@/utils/common";
withDefaults(
  defineProps<{
    item: reqReportNotice;
  }>(),
  {}
);
const expand = ref(false);
</script>
